import MyTable from "@/components/MyTable";
import SearchHeader from "@/components/SearchHeader";
import useTable from "@/hooks/useTable";
import { Button, Form } from "antd";
import { useMemo, useRef } from "react";
import { useConfig } from "./form.config";

import { useBoolean } from "ahooks";
import Add from "./Add";
import ButtonGroup from "@/components/ButtonGroup";
import {  getOrderRoomPage } from "@/services/room/room";
import dayjs from "dayjs";
import { RoomTypeEnum } from "@/constants/enum";
const tommorrow = dayjs().add(1, "day");
const timeLong = 30 //预约时间

export default () => {
  const config = useConfig();
  const [form] = Form.useForm();
  const [open, { toggle: toggleOpen }] = useBoolean(false);
  const roomInfoRef = useRef(null);

  const { tableProps, reset, submit, refresh} = useTable(getOrderRoomPage, {
    defaultFormValues: {
      time:[tommorrow,tommorrow.add(timeLong,'day')]
    },
    form: form,
  });

  const addOrEdit = (record) => {
    roomInfoRef.current = record ?{ 
      roomId:record.roomId,
      roomPrice:record.roomPrice,
      roomType:RoomTypeEnum[record?.roomType]||""
    }:null;
    toggleOpen();
  };

  const columns = useMemo(() => {
    return [
      {
        title: "房间号",
        dataIndex: "roomNum",
      },
      {
        title: "房间类型",
        dataIndex: "roomType",
        render:(r:any)=>`${RoomTypeEnum[r]}`,
      },
      {
        title: "价格(元/天)",
        dataIndex: "roomPrice",
        render:(r:any)=>`${r}`,
      },
      {
        title: "操作",
        dataIndex: "action",
        align: "center",
        render: (_: any, record:any) => {
          return (
            <ButtonGroup>
              <Button type="link" onClick={() => addOrEdit(record)}>
                预定
              </Button>
            </ButtonGroup>
          );
        },
      },
    ];
  }, []);

  return (
    <>
      <div style={{ marginBottom: "16px" }}>
        <SearchHeader
          configs={config}
          form={form}
          onSubmit={submit}
          onReset={reset}
        />
      </div>

      <MyTable
        rowKey={"roomId"}
        columns={columns}
        {...tableProps}
        dataSource={tableProps.dataSource}
      />
      {open && (
        <Add
          open={open}
          close={toggleOpen}
          roomInfo={roomInfoRef.current}
          refresh={refresh}
        />
      )}
    </>
  );
};
